<template>
	<div class="">
		<div class="taskTitleThen">
			{{ majorsTit }}
		</div>
		<!-- 准备具有宽高的容器 -->
		<!-- 顶部图片区域 -->
		<div class="">
			<div class="myTopIn" :style=" `background-image: url(${courseInfo.class_img})` ">

			</div>
			<div class="classZIndex">
				<div class="zIndexInfo">
					<div class="">
						首页 <i class="el-icon-arrow-right"></i> 课程任务
					</div>
					<div class="detialInIt">
						<div class="courseInS" style="display: flex;flex-direction: column;align-items: center;">
							<div class="keC">
								<i class="el-icon-monitor" style="margin-right: 8px;"></i>课程属性：课程学分：<span
									style="font-weight: bold;">{{ courseInfo.score }}分</span> 合格分数：<span
									style="font-weight: bold;">60分</span>
							</div>
							<div class="continueIn">
								<div class="">继续学习
									<i class="el-icon-arrow-right"></i>
								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="lastIn">
					<span>上次学习到：{{studyTitle}}</span>
				</div>
			</div>
		</div>
		<!-- end -->
		<div class="inCon">
			<div class="" style="display: flex; align-items: center;">
				<div class="imImage">
					<div>
						<img style="width: 420px;height: 320px;border-radius: 8px;" :src="courseInfo.class_img">
					</div>
					<div class="inThneit">
						<div class="">
							<div class="thenName1">
								{{ courseInfo.title }}
							</div>
							<div class="" style="margin-top: 16px;">
								<div class="myTimeIn">
									课件学习时间：{{ courseInfo.start_time ? courseInfo.start_time : '---' }} -
									{{ courseInfo.end_time ? courseInfo.end_time : '---' }}
								</div>
								<div class="myTimeIn">
									阶段评测时间：{{ inspectionRules.exam_start_time ? inspectionRules.exam_start_time :  '---' }}
									- {{ inspectionRules.exam_end_time ? inspectionRules.exam_end_time : '---' }}
								</div>
								<div class="myTimeIn">
									综合评测时间：{{ inspectionRules.work_start_time ? inspectionRules.work_start_time : '---' }}
									- {{ inspectionRules.work_end_time ? inspectionRules.work_end_time : '---' }}
								</div>
							</div>
						</div>
						<div class="allIn">
							<div class="inAllin">
								<i class="el-icon-reading"
									style="font-size: 30px;color: #89afa2;margin-right: 8px;"></i>
								<div class="">
									课件学习
								</div>
							</div>
							<div class="inAllin">
								<i class="el-icon-edit-outline"
									style="font-size: 30px;color: #6fcf77;margin-right: 8px;"></i>
								<div class="">
									阶段评测
								</div>
							</div>
							<div class="inAllin">
								<i class="el-icon-takeaway-box"
									style="font-size: 30px;color: #f3b099;margin-right: 8px;"></i>
								<div class="">
									综合评测
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="inThird">
					<div class="" style="width: 500px;margin-right: 40px;">
						<!-- <div class="continue">
            继续学习
          </div>
          <div class="inLast">
            上次学习到第十二章
          </div> -->
						<div id="chart" class="myChart" ref="chart"></div>
					</div>
				</div>

			</div>
		</div>
		<div class="">
			<!-- <div id="chart" class="myChart" ref="chart"></div> -->
		</div>

	</div>
</template>

<script>
	export default {
		name: 'echarts01',
		data() {
			return {
				chart: null,
				courseInfo: [],
				inspectionRules: [],
				majorsTit: '',
				userInfo: {},
				studyTitle: '--'
			}
		}, //图表实例
		mounted() {
			// this.init()
			this.getCourseInfo() //数据请求
		},
		created() {
			this.courseInfo = JSON.parse(sessionStorage.getItem('classInfoV'))
			this.majorsTit = JSON.parse(sessionStorage.getItem('InfoMation')).majors.title
			this.userInfo = JSON.parse(sessionStorage.getItem('InfoMation'));
			console.log(this.userInfo);
			this.getStudayTime()
		},
		methods: {
			getCourseInfo() {
				this.$axios.post('https://vvv.52ecode.cn/api/v1.OfficeRules/index', {
					class_id: this.courseInfo.id,
					website_id: 1
				}).then(res => {
					this.inspectionRules = res.data.data
					sessionStorage.setItem('Rules', JSON.stringify(res.data.data))
					console.log(this.inspectionRules)
					this.init()
				}).catch(err => {
					console.log(err);
				})
			},
			
			getStudayTime(){
				this.$axios.post('https://vvv.52ecode.cn/api/v1.UserVideoRecord/index', {
					class_id: this.courseInfo.id,
					user_id: this.userInfo.id,
					website_id: 1
				}).then(res => {
					console.log(res);
					this.studyTitle = res.data.data.chapter_name
				}).catch(err => {
					console.log(err);
				})
			},
			
			init() {
				// console.log(this.$Echarts)
				this.chart = this.$Echarts.init(this.$refs.chart)
				let option = {
					tooltip: {
						trigger: 'item'
					},
					legend: {
						top: '6%',
						left: 'center'
					},
					series: [{
						type: 'pie',
						radius: ['30%', '54%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '20',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: [{
								value: this.inspectionRules.video_ratio ? this.inspectionRules
									.video_ratio : 0,
								name: '课件学习'
							},
							{
								value: this.inspectionRules.text_ratio ? this.inspectionRules.text_ratio :
									0,
								name: '阶段评测'
							},
							{
								value: this.inspectionRules.work_ratio ? this.inspectionRules.work_ratio :
									0,
								name: '综合评测'
							},
						]
					}]
				};
				this.chart.setOption(option)
				
			},

		},
	}
</script>

<style>
	.lastIn {
		font-size: 18px;
		margin: 48px 16px;
		text-align: right;
		letter-spacing: 1pt;
		cursor: pointer;
	}

	.lastIn span {
		padding-bottom: 4px;
		border-bottom: solid 1px #FFFFFF;
	}

	.continueIn {
		background-color: #3963ff;
		letter-spacing: 1.5pt;
		width: 160px;
		font-size: 24px;
		margin-top: 32px;
		border-radius: 30px;
		padding: 10px 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.continueIn div {
		margin-left: 2px;
	}

	.continueIn:active {
		background-color: #628cff;
	}

	.keC {
		margin-top: 28px;
		width: 400px;
		background-image: linear-gradient(to right, #0000004D, #00000099, #0000004D);
		text-align: center;
		border-radius: 30px;
		font-size: 18px;
		padding: 10px 20px;
	}

	.detialInIt {
		margin-top: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.zIndexInfo {
		padding: 16px 16px 0 16px;
		color: #FFFFFF;
		cursor: pointer;
		font-size: 18px;
	}

	.classZIndex {
		width: 100%;
		height: 400px;
		background-color: #00000080;
		z-index: 999;
		position: relative;
		margin-top: -400px;
		color: #FFFFFF;
	}

	.myTopIn {
		width: 100%;
		height: 400px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		filter: blur(15px);
	}

	.inAllin {
		cursor: pointer;
		color: #7e79cc;
		font-size: 18px;
		display: flex;
		align-items: center;
	}

	.allIn {
		display: flex;
		width: 500px;
		justify-content: space-between;
	}

	.myTimeIn {
		color: #9f9f9f;
		margin-top: 20px;
		font-size: 18px;
	}

	.thenName1 {
		font-size: 24px;
		font-weight: bold;
	}

	.inThneit {
		margin-left: 40px;
		border-right: dashed 2px #bcc0c7;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.imImage {
		display: grid;
		grid-template-columns:1fr 5fr 1fr;
	}

	.inThird {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.inLast {
		margin-top: 8px;
		color: #9d9d9d;
	}

	.continue {
		font-size: 20px;
		background-color: #596ee1;
		width: 200px;
		color: #FFFFFF;
		height: 40px;
		display: flex;
		align-items: center;
		border-radius: 5px;
		justify-content: center;
		cursor: pointer;
	}

	.continue:active {
		background-color: #85b5e1;
	}

	.inNumb {
		color: #5d71dd;
	}

	.numbIner {
		margin-top: 16px;
		display: flex;
		margin-left: 16px;
		font-size: 20px;
	}

	.insecTime {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 220px;
	}

	.myTime {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.inDeialth {}

	.inCouse {
		font-weight: bold;
		font-size: 20px;
	}

	.insecond {
		border-left: dashed 1px #b1b1b1;
		height: 80px;
		width: 50%;
		justify-content: center;
		border-right: dashed 1px #b1b1b1;
		padding: 0 20px;
		margin: 0 60px 0 60px;
		display: flex;
		align-items: center;
	}

	.inCric {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.inCon {
		position: relative;
		z-index: 9999;
		display: flex;
		margin: -100px 16px 0 16px;
		background-color: #f8f8f8;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		padding: 16px;
		align-items: center;
		border-radius: 8px;
	}

	.myChart {
		width: 320px;
		height: 320px;
	}

	.indo {
		margin-top: 32px;
		margin-left: 24px;
		margin-bottom: 32px;
	}

	.noticeInfo {
		display: flex;
		justify-content: space-between;
		width: 95%;
		margin-left: 20px;
		padding: 24px 0;
		border-bottom: solid 1px #eaeaea;
	}

	.notice {
		padding: 0 24px;
		display: flex;
		align-items: center;

	}

	.notice:hover {
		background-color: #f7fafc;
	}

	.theNotice {
		height: 40px;
		width: 50px;
		justify-content: center;
		display: flex;
		align-items: center;
		border-radius: 4px;
		color: #FFFFFF;
		background-color: #c4c9cc;
	}

	.doIng {}

	.taskTitleThen {
		padding: 0 24px 16px 24px;
		border-bottom: solid 1px #eaeaea;
	}
</style>
